<template>
    <div id="count">
        <Tabbar></Tabbar>
        <div class="slide">
            <el-carousel :interval="4000" type="card" height="300px" indicator-position="outside">
                <el-carousel-item v-for="item in arr1" :key="item">
                    <img :src="item" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="main">
            <div class="content" v-for="(item,index) in arr2" :key="index">
                <h3>{{item.top}}</h3>
                <ul>
                    <li v-for="(sItem,sIndex) in item.list" :key="sIndex">
                        <img :src="sItem.imgsrc" alt="">
                        <p class="title">{{sItem.title}}</p>
                        <p class="name">{{sItem.name}}</p>
                        <div class="price-box">
                            <span class="price">{{sItem.price}}</span>
                            <button class="btn">立即购买</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
// import axios from 'axios';
import instance from '../api';
import Tabbar from '../components/Tabbar.vue';
export default {
    name:'Count',
    data(){
        return {
            arr1:null,
            arr2:null
        }
    },
    components:{
        Tabbar
    },
    methods:{
        async fn(){
            let {data} = await instance.get('count')
            this.arr1=data.slide
            this.arr2=data.content
            console.log(this.arr2)
        }
    },
    created(){
        this.fn()
    }
}
</script>

<style>
#count {
    width: 100%;
    background: #f3f5f7;
}
.slide {
    width: 1200px;
    height: 375px;
    padding-top: 75px;
    margin: 0 auto;
    box-sizing: border-box;
}
.slide img {
    height: 300px;
    width: 650px;
}
.main {
    width: 1200px;
    margin: 30px auto;
}
.content {
    width: 100%;
    height: 445px;
}
.content h3 {
    color: #000;
    font-size: 24px;
    line-height: 58px;
    margin: 0;
}
.content ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.content ul li {
    width: 224px;
    background: #f3f5f7;
}
.content li img {
    width: 224px;
}
.content li .title {
    color: #000;
    font-size: 14px;
    margin-top: 20px;
    line-height: 22px;
}
.content li .name {
    color: #999;
    font-size: 14px;
    line-height: 22px;
}
.price-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.price {
    font-size: 14px;
    color: #999;
    line-height: 28px;
}
.btn {
    color: #000;
    font-size: 12px;
    width: 80px;
    height: 28px;
    text-align: center;
    background: #f3f5f7;
    border: 1px solid #999;
}
</style>